<template>
  <div class="ma-content-block lg:flex justify-between">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @resetSearch="resetSearch">
      <template #expandArea="data">
        <a-table :data="data.total_data" :pagination="false" style="margin-bottom: 30px;">
          <template #columns>
            <a-table-column title="积分类型" data-index="points_text"></a-table-column>
            <a-table-column title="总数" data-index="total"></a-table-column>
            <a-table-column title="条数" data-index="count"></a-table-column>
          </template>
        </a-table>
        </template>
      <template #tableSearch>
        <a-col :span="6">
          <a-form-item field="user" label="转入会员账号">
            <a-input allow-clear v-model="searchForm.user" placeholder="转入会员账号" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="uid" label="转入会员UID">
            <a-input allow-clear v-model="searchForm.uid" placeholder="转入会员UID" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="get_user" label="转出会员信息">
            <a-input allow-clear v-model="searchForm.get_user" placeholder="会员UID|会员账号" @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="points" label="积分类型">
            <sa-select v-model="searchForm.points" :data="paramsData.points"
              :fieldNames="{ label: 'title', value: 'value' }" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="state" label="状态">
            <sa-select v-model="searchForm.state" :data="paramsData.state"
              :fieldNames="{ label: 'title', value: 'value' }" @change="refresh"></sa-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="date" label="日期">
            <a-range-picker v-model="searchForm.date" format="YYYY-MM-DD" :allow-clear="true"
              @change="refresh"></a-range-picker>
          </a-form-item>
        </a-col>
      </template>
<template #operationAfterExtend="{ record }">
        <a-button  type="primary" size="mini" shape="round" v-if="record.state != 0" @click="handleDetail('detail', record)">详情 </a-button>
        <a-button class="yellow_color" v-if="record.state == 0" type="primary" size="mini" shape="round" @click="handleDetail('check', record)">审核 </a-button>
      </template>

<template #state_text="{ record }">
        <a-tag color="blue" v-if="record.state == 0">{{ record.state_text }}</a-tag>
        <a-tag color="green" v-else-if="record.state == 1">{{ record.state_text }}</a-tag>
        <a-tag color="magenta" v-else>{{ record.state_text }}</a-tag>
      </template>
</sa-table>
    <!-- 编辑表单 -->
    <detail-form ref="detailRef" @success="refresh" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import memberApi from '@/api/system/member'
import SaSelect from '@cps/sa-select/index.vue'
import SaTable from '@cps/sa-table/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import { useRouter } from 'vue-router';
import detailForm from './detail.vue'
import tool from '@/utils/tool'
const crudRef = ref()
const detailRef = ref()
const searchForm = ref({
  points: '',
  state: 99,
  get_user: '',
  date: [],
  user: '',
  uid:'',
})
const options = reactive({
  api: memberApi.transfer_list,//表格数据接口
  operationColumnWidth: 100,//操作欄
  columnAlign: 'center',
  pageSimple: false,
  isExpand: false,//展開所有子樹
})

const columns = reactive([
  { title: 'ID', dataIndex: 'id', width: 100 },
  { title: '审核状态', dataIndex: 'state_text', width: 150 },
  { title: '转出UID', dataIndex: 'get_user_id', width: 150 },
  { title: '转出会员账号', dataIndex: 'get_user_name', width: 150 },
  { title: '转入UID', dataIndex: 'user_id', width: 150 },
  { title: '转入会员账号', dataIndex: 'user_name', width: 150 },
  { title: '积分', dataIndex: 'points_text', width: 150 },
  { title: '转帐数量', dataIndex: 'number', width: 150 },
  { title: '手续费', dataIndex: 'cost', width: 150 },
  { title: '得到数量', dataIndex: 'get_num', width: 150 },
  { title: '创建时间', dataIndex: 'create_time', width: 200 },
  { title: '审核员', dataIndex: 'auth_admin', width: 150 },
  { title: '审核备注', dataIndex: 'auth_msg', width: 150 },
  { title: '审核时间', dataIndex: 'auth_time', width: 200 },
  { title: '需审核备注', dataIndex: 'err_msg', width: 150 },
])
const handleDetail = (type, data) => {
  detailRef.value?.open(type, data)
}
const initPage = async () => { }
const resetSearch = () => {
  searchForm.value.date = []
}
const refresh = async () => {
  crudRef.value?.refresh()
}
const paramsData = ref({})
// 获取角色组
const getParams = async () => {
  const { data } = await memberApi.transfer_list_params()
  paramsData.value = { ...data }
  paramsData.value.points = []
  paramsData.value.state = tool.simpleTransformArray(data.state)
  paramsData.value.state.unshift({ title: '全部', value: 99 })
  paramsData.value.points = []
  Object.keys(data.points).forEach((itm, idx) => {
    paramsData.value.points.push({ value: itm, title: data.points[itm].name })
  })
  console.log(11, paramsData.value);

}



onMounted(async () => {
  getParams()
  initPage()
  refresh()
})
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>
